<%@ page import="com.bookstore.entity.Product" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Set" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    HashMap<Product, Integer> productMap = (HashMap<Product, Integer>) session.getAttribute("productMap");
%>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/offcanvas/">

    <title>购物车页</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/justified-nav/">

    <title>在线书城首页</title>

    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/examples/justified-nav/justified-nav.css"
          rel="stylesheet">

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/css/ie10-viewport-bug-workaround.css"
          rel="stylesheet">

    <!-- Custom styles for this template -->

    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie-emulation-modes-warning.js"></script>
</head>

<body>
<div class="container">
    <!-- The justified navigation menu is meant for single line per list item.
   Multiple lines will require custom code not provided by Bootstrap. -->
    <div class="masthead">
        <div class="row">
            <div class="col-md-6">
                <h3 class="text-muted">在线书城</h3>
                <h4 class="text-muted">bookstore.com</h4>
            </div>
            <div class="col-md-6">
                <div style="float: right;">
                    <nav>
                        <ul class="nav nav-pills">
                            <li><a href="#">我的账户</a></li>
                            <li><a href="./product_cart.jsp">购物车</a></li>
                            <li><a href="#">新用户注册</a></li>
                            <li><a href="#">帮助中心</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                    </div><!-- /.col-lg-6 -->
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入图书名称">
                            <span class="input-group-btn">
										<button class="btn btn-default" type="button">搜索</button>
									</span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
            </div>
        </div>


        <nav>
            <ul class="nav nav-justified">
                <li><a href="../index.html">首页</a></li>
                <li><a href="#">文学</a></li>
                <li><a href="#">经管</a></li>
                <li><a href="#">励志</a></li>
                <li><a href="#">艺术</a></li>
                <li><a href="#">少儿</a></li>
                <li><a href="#">生活百科</a></li>
                <li class="active"><a href="./product_list.html">全部分类</a></li>
            </ul>
        </nav>
    </div>
    <div class="row">


        <h2 class="sub-header">购物车列表</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <%
                    Set<Product> products = productMap.keySet();
                    int index = 1;
                    double totalPrice = 0;
                    for (Product product :
                            products) {
                        //商品数量
                        Integer pNum = productMap.get(product);
                        //当前商品总价
                        double currentTotalPrice = pNum * product.getPrice();
                        totalPrice += currentTotalPrice;
                %>
                <tr>
                    <td><%=index++%>
                    </td>
                    <td><%=product.getName()%>
                    </td>
                    <td><%=product.getPrice()%>
                    </td>
                    <td><%=pNum%>
                    </td>
                    <td><%=totalPrice%>
                    </td>
                    <td>
                        <a class="btn btn-danger" href="./cart.do?action=delete&productId=<%=product.getId()%>">删除</a>
                    </td>
                </tr>
                <%
                    }
                %>
                </tbody>
            </table>
            <h1>总价：<%=totalPrice%>元</h1>
            <button class="btn btn-lg btn-success">结算</button>


        </div>

    </div>
</div>


<hr>

<footer>
    <p>&copy; 2016 Company, Inc.</p>
</footer>

</div>
<!--/.container-->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script>
    window.jQuery || document.write(
        '<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/vendor/jquery.min.js"><\/script>'
    )
</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/examples/offcanvas/offcanvas.js"></script>
</body>
</html>
